import { onMounted } from "vue";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
import { TilesRenderer } from '3d-tiles-renderer'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

import * as THREE from 'three'
export default function TilesRendererModules(pathsArray, camera, renderer) {
    const tilesRendererModules = new THREE.Group();


    onMounted(() => {
        pathsArray.forEach(path => {
            // 加载3D Tiles
            const tilesRenderer = new TilesRenderer(path);
            tilesRenderer.setCamera(camera);
            tilesRenderer.setResolutionFromRenderer(camera, renderer);
            tilesRendererModules.add(tilesRenderer);

            // 解码器设置
            const dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath("https://unpkg.com/three/examples/jsm/libs/draco/gltf/");
            const loader = new GLTFLoader(tilesRenderer.manager);
            loader.setDRACOLoader(dracoLoader);
            loader.setMeshoptDecoder(MeshoptDecoder);
            tilesRenderer.manager.addHandler(/\.gltf$/, loader);
        });
    })

    const tilesRendererHooksUpdate = () => {
        
        tilesRendererModules.children.forEach(module => module.update());
    }

    return { tilesRendererModules, tilesRendererHooksUpdate }
}